<template>
	<view class="repair-wrap">
		<view>
			<view v-if="clapListData.length == 0">
				<view style="width: 232px; height: 242px; margin: 110px auto">
					<image style="width: 100%; height: 100%"
						src="../../static/image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
				</view>
				<view style="width: 62%; margin: -66px auto; text-align: center; color: #999">暂无数据</view>
			</view>
			<view>
				<view v-for="(item, index) in clapListData"
					:style="index == 0 ? 'margin-top: 10rpx;' : 'margin-top: 10rpx;'">
					<!--          只差等受理和待处理的信息-->
					<view @click="navTo(item)">
						<view>
							<view class="shadow" style="
									width: 100%;
									padding: 20rpx 36rpx;
									background-color: #ffffff;
									border-radius: 20rpx;
								">
								<view class="flexClsNowrapSpcBtw" style="justify-content: space-between;">
									<view class="flex align-center">
										<image style="width: 31px; height: 32px; margin-right: 3px"
											src="../../static/image/surance.png"></image>
										<text style="font-weight: bold; font-size: 18px">
											{{ item.ins_name }}
										</text>
										<view v-show="item.dot == true" style="
												width: 20rpx;
												height: 20rpx;
												border-radius: 7px;
												background-color: #ff3b30;
												margin-top: -32rpx;
											"></view>
									</view>

									<view style="">
										<view class="notice-typePu" v-if="item.ins_state == 0">待受理</view>

										<view class="notice-typePu" v-if="item.ins_state == 1">待确认</view>
										<view class="notice-typePu" v-if="item.ins_state == 2">审核中</view>
										<view class="notice-typePu" v-if="item.ins_state == 3">待赔付</view>

										<view class="notice-typePuTong" v-if="item.ins_state == 4">已赔付</view>
										<view class="notice-type" v-if="item.ins_state == 7">受理拒绝</view>
										<view class="notice-typeBlue" v-if="item.ins_state == 6">已受理待处理</view>
										<view class="notice-type" v-if="item.ins_state == 5">业主拒绝</view>
										<view class="notice-type" v-if="item.ins_state == 8">处理拒绝</view>
									</view>
								</view>
								<view class="pl-1" style="margin-top: 20rpx">
									<view class="flexClsNowrapSpcBtw">
										<span style="color: #999">理赔类型：</span>
										<span>
											{{
												item.claims_type == 1
													? '车辆理赔'
													: item.claims_type == 2
													? '高空抛物'
													: item.claims_type == 3
													? '漏水漏电'
													: item.claims_type == 4
													? '设备设施'
													: item.claims_type == 5
													? '交通事故'
													: item.claims_type == 6
													? '人身意外'
													: item.claims_type == 7
													? '工伤理赔'
													: item.claims_type == 8
													? '盗窃理赔'
													: '---'
											}}
										</span>
									</view>
								</view>
								<view class="u-flex mt-1 pl-1">
									<view class="u-flex-1 flexClsNowrapSpcBtw">
										<span style="color: #999">事件日期：</span>
										<span>{{ item.event_time.substring(0, 10) }}</span>
									</view>
								</view>
								<!-- <view class="u-flex u-margin-top-12" v-if="item.actual_amount">
	                    <view class="u-flex-1">实际金额：<text style="font-weight: bold">{{item.actual_amount}}元</text></view>
	                  </view> -->
								<view class="u-flex mt-1 pl-1" v-if="item.payout_amount">
									<view class="u-flex-1 flexClsNowrapSpcBtw">
										<span style="color: #999">赔付金额：</span>
										<text style="font-weight: bold; color: red">￥{{ item.payout_amount }}</text>
									</view>
								</view>
								<view class="u-flex mt-1 pl-1" v-if="item.tr_money">
									<view class="u-flex-1 flexClsNowrapSpcBtw">
										<span style="color: #999">要求金额：</span>
										<text style="font-weight: bold; color: red">￥{{ item.tr_money }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="add-process" @click="natov('/pages/yeInsurance/applylnsurance')">
			<image style="width: 56px; height: 56px" src="../../static/image/tenAddDatas.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				modelShow: false,
				modelContent: null,
				claims_amount: '0.00',
				type: 1,
				index: 0,
				ruleForm: {
					renType: null
				},
				indexList: true,
				pageIndex: 1,
				clapListData: [], //获取小区
				orgIDCh: null,
				claims_amountJinEn: 0,
				userSex: null,
				org_id: null,
				loading: false,
				// type: 1,
				nextPage: false,
				listData: [],
				addlnsura: {
					ins_money: null,
					tr_money: null,
					ins_cer: null,
					taking_sides: null,
					claims_type: null, // 理赔类型
					ins_name: null, // 理赔名称
					event_time: null // 事件时间
				},
				indexYingHa: 0, // 费用承担方键值
				yingHangLei: [{
						yingHang_id: 0,
						yingHang_name: '请选择'
					},
					{
						yingHang_id: 1,
						yingHang_name: '物业公司'
					},
					{
						yingHang_id: 2,
						yingHang_name: '业主本人'
					}
				],
				indexss: 0, //理赔类型
				lnsTest: [{
						lnsTest_id: 0,
						lnsTest_name: '请选择理赔类型'
					},
					{
						lnsTest_id: 1,
						lnsTest_name: '车辆理赔'
					},
					{
						lnsTest_id: 2,
						lnsTest_name: '高空抛物'
					},
					{
						lnsTest_id: 3,
						lnsTest_name: '漏水漏电'
					},
					{
						lnsTest_id: 4,
						lnsTest_name: '设备设施'
					},
					{
						lnsTest_id: 5,
						lnsTest_name: '交通事故'
					},
					{
						lnsTest_id: 6,
						lnsTest_name: '人身意外'
					},
					{
						lnsTest_id: 7,
						lnsTest_name: '工伤理赔'
					},
					{
						lnsTest_id: 8,
						lnsTest_name: '盗窃理赔'
					}
				], //单位
				date: currentDate
			}
		},
		//点击跳转新增
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/pages/yeInsurance/applylnsurance'
			})
		},
		//不清清楚是啥，时间用的
		computed: {
			startDate() {
				return this.getDate('start')
			},
			endDate() {
				return this.getDate('end')
			}
		},
		onShow() {
			this.checkLogin()
		},
		onPullDownRefresh() {
			this.checkLogin()
		},
		methods: {
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							// uni.showModal({
							//   title: '请先进行业主认证',
							//   showCancel: false,
							//   confirmText: '确认',
							//   confirmColor: '#F9A832',
							//   success: function (res) {
							//     if (res.confirm) {
							//       _this.$Router.push({
							//         path: '/pages/address/address'
							//       })
							//     }
							//   }
							// });
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName
							_this.address =
								_this.homelist.buildDistrictCode +
								'-' +
								_this.homelist.buildTowerCode +
								'-' +
								_this.homelist.roomUnitNumber +
								'-' +
								_this.homelist.roomCode
							_this.cselectOrg(_this.homelist.proId)
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/realName/realName'
									})
								}
							}
						})
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					})
				}
			},
			cselectOrg(pro_id) {
				uni.showLoading({
					title: '加载中'
				})
				this.$request.api
					.getNeed({
						type: 1,
						project_id: pro_id
					})
					.then((res) => {
						this.org_id = res.data.data.org_id
						this.pageIndex = 1
						this.getclapList()
						uni.hideLoading()
					})
			},
			//待受理  --- 显示 ：0.待受理, 1.受理中.2审核中 3待转账，4.已完成 和5的信息
			async getclapList() {
				let res = this.$request.api
					.insuraDaiCha({
						//查询自己的理赔
						pageIndex: this.pageIndex,
						pro_id: Number(this.homelist.proId), //直接掉用业主项目
						user_id: this.homelist.ownerUserId, //操作人id
						room_id: this.homelist.roomId, //房间号id ，只能查询当前自己的房间信息
						org_id: this.org_id
					})
					.then((res) => {
						this.clapListData = res.data.data.datalist
						uni.stopPullDownRefresh()
					})
			},
			natov(url) {
				uni.navigateTo({
					url: url
				})
			},
			navTo(item) {
				let url = ''
				if (
					item.ins_state == 7 ||
					item.ins_state == 0 ||
					item.ins_state == 6 ||
					item.ins_state == 8 ||
					item.ins_state == 2 ||
					item.ins_state == 3 ||
					item.ins_state == 5
				) {
					url = '/pages/yeInsurance/insuranceRequested'
				} else if (item.ins_state == 4) {
					url = '/pages/yeInsurance/acceptedDetail'
				} else {
					url = '/pages/yeInsurance/insuranceDetail'
				}
				let items = encodeURIComponent(JSON.stringify(item))
				//取消红点
				this.$request.api.removeRedDot({
					id:item.id
				})
				uni.navigateTo({
					url: url + '?item=' + items
				})
			},
			onRefresh() {
				if (!this.nextPage) {
					this.pageIndex = 1
					this.getclapList()
				}
				this.loading = false
				uni.hideLoading()
			},
			//日期
			getDate(type) {
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()

				if (type === 'start') {
					year = year - 60
				} else if (type === 'end') {
					year = year + 2
				}
				month = month > 9 ? month : '0' + month
				day = day > 9 ? day : '0' + day
				return `${year}-${month}-${day}`
			}
		}
	}
</script>

<style lang="scss">
	.img_sex {
		width: 20px;
		height: 20px;
		position: absolute;
		// top: 85px;
		left: 51px;
		z-index: 10;
	}

	.ziTiYangShi {
		margin-left: 11px !important;
	}

	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.clap_box {
		width: 89%;
		margin: 0 auto;
	}

	.clap_box_img {
		width: 100%;
		margin-top: 24px;
	}

	.guar-text textarea {
		border-radius: 8px;
		// width: 345px;
		height: 120px;
		background: #f2f3f5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
	}

	.clap_box_imgtow {
		position: absolute;
		top: 102px;
		right: 175px;
		width: 50px;
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		width: 100%;
		z-index: 10;
		top: 45px;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #447a05;
	}

	.active::after {
		content: '';
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #447a05;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.button {
		width: 30%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #cccccc;
		font-size: 14px;
	}

	.button1 {
		width: 22%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #cccccc;
		font-size: 14px;
	}

	.button:hover {
		border: 1px solid #f9a832;
		color: #ffffff;
		background-color: #f9a832;
	}

	.header-li {
		display: flex;
		// align-items: center;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #eeeeee;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 480rpx;
		background: url(../../static/image/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		// background: #F9A832;
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #ffffff;
		text-align: center;
		font-size: 32rpx;
		background: linear-gradient(180deg, #76d904 0%, #417505 100%);
	}

	.list-img {
		width: 50px;
		height: 50px;
		// border-radius: 50%;
	}

	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.title {
		font-size: 26rpx;
		color: #999999;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
	}

	.button_btn {
		width: 29%;
		border-radius: 33px;
		line-height: 26px;
		border: 1px solid #cccccc;
		font-size: 14px;
		margin-left: 2px;
	}

	.follow {
		height: 26px;
		line-height: 25px;
		text-align: center;
		padding: 0px 15px;
		border-radius: 16px;
		font-size: 11px;
		border: 1px solid #ffffff;
		float: right;
		background: linear-gradient(to bottom, #c3e69b99, #00aa008f);
	}

	.complete {
		padding: 0 20rpx;
		display: flex;
		text-align: center;
		font-size: 26rpx;
	}

	.complete_chu {
		// width: 180rpx;
		// height: 60rpx;
		background-color: rgba(249, 168, 50, 0.2);
		// background-color: rgba(69, 124, 5, 0.1);
		// margin: 30rpx 10rpx;
		line-height: 56rpx;
		border-radius: 54rpx;
		position: relative;
	}

	.complete_chu1 {
		// width: 180rpx;
		height: 60rpx;
		// background-color: rgba(249,168,50,0.2);
		background-color: rgba(69, 124, 5, 0.1);
		margin: 30rpx 10rpx;
		line-height: 60rpx;
		border-radius: 54rpx;
		position: relative;
	}

	.complete_chuImg {
		width: 30rpx;
		height: 30rpx;
		margin-top: 8px; // position: absolute;
		// top: 7px;
		// left: 30rpx;
	}

	.complete_chuTxt {
		margin-left: 35rpx;
	}

	.complete_yi {
		width: 180rpx;
		height: 80rpx;
		background-color: #33f9a832;
		margin: 30rpx 10rpx;
		line-height: 80rpx;
		border-radius: 54rpx;
		position: relative;
	}

	.complete_chuImg {
		width: 30rpx;
		height: 30rpx;
		// position: absolute;
		// top: 25rpx;
		// left: 30rpx;
		margin-top: 8px;
	}

	.complete_chuTxt {
		margin-left: 6px;
	}

	.complete_dian {
		margin-left: 160rpx;
		line-height: 140rpx;
		color: #999;
		letter-spacing: 3rpx;
	}

	//增加描述输入框

	.header-form {
		background: #ffffff;

		.header-li {
			// padding:0 45rpx;
			display: flex;
			// align-items: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 400;
			line-height: 95rpx;
			color: #333333;
			border-bottom: 1rpx solid #eeeeee;

			.header-name {
				width: 150rpx;
			}

			.text-area {
				width: 310rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}

	.guar-text textarea {
		border-radius: 8px;
		// width: 345px;
		height: 200rpx;
		background: #f2f3f5;
		padding: 16rpx 20rpx !important;
		box-sizing: border-box;
		// border: 1px solid #999;
		width: 355px;
	}

	.repair-box {
		background: #fff;

		.repair-titel {
			height: 44rpx;
			line-height: 44rpx;

			.repair-titel-l {
				float: left;
			}

			.repair-titel-r {
				float: right;
				color: #999;
			}
		}

		.repair-6 {
			color: #666;
		}
	}

	//字体排序样式
	.box2 {
		width: 345px;
		height: 20px;
		margin: 10px 0 0 15px;
	}

	.layer2 {
		width: 345px;
		height: 22px;
		margin: 20px 0 0 15px;
	}

	.txt2 {
		width: 65px;
		height: 22px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 16px;
		letter-spacing: 0.19200000166893005px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
		line-height: 22px;
		text-align: left;
	}

	.word3 {
		width: 43px;
		height: 20px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(249, 173, 62, 1);
		font-size: 14px;
		letter-spacing: 0.25200000405311584px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
		line-height: 20px;
		text-align: right;
	}

	.info2 {
		width: 29px;
		height: 20px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 14px;
		letter-spacing: 0.25200000405311584px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
		line-height: 20px;
		text-align: left;
	}

	//时间
	.form-data {
		background: #ffffff;
		border-bottom: 1rpx solid #eeeeee;

		.form-cont {
			margin: 0 36rpx;
			box-sizing: border-box;
			// background: #FFFFFF;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			height: 102rpx;
			font-size: 28rpx;
			color: #333333;

			.title {
				color: #333333;
				font-weight: bold;
				width: 170rpx;
			}

			.input {
				width: 400rpx;
				text-align: left;
				line-height: 200%;

				.tab-type {
					width: 254rpx;
					height: 64rpx;
					border-radius: 6rpx 0rpx 0rpx 6rpx;
					border: 2rpx solid #578ef0;
					display: flex;
					align-items: center;
					justify-content: center;

					.shi {
						width: 126rpx;
						height: 60rpx;
						background: #4a90e2;
						text-align: center;
						line-height: 60rpx;
						color: #ffffff;
					}

					.fou {
						width: 126rpx;
						height: 60rpx;
						background: #ffffff;
						text-align: center;
						line-height: 60rpx;
						color: #4a90e2;
					}
				}
			}
		}
	}

	.notice-typePu {
		color: rgb(255, 255, 255);
		background: linear-gradient(90deg, #ebb15ddb 0%, #f9a832 100%);
		padding: 10rpx 22rpx;
		text-align: center;
		border-bottom-right-radius: 22rpx;
		border-top-left-radius: 22rpx;
	}

	.notice-type {
		width: 64px;
		height: 56rpx;
		background: linear-gradient(90deg, #ff6666 0%, #fd3636 100%);
		border-radius: 12rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 56rpx;
	}

	.notice-typePuTong {
		width: 64px;
		height: 40rpx;
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		border-radius: 12rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.notice-typeBlue {
		width: 64px;
		height: 40rpx;
		background: linear-gradient(90deg, #578ae7 0%, #3d7fff 100%);
		border-radius: 12rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.add-process {
		position: fixed;
		right: 36rpx;
		bottom: 230rpx;
	}
</style>